/* pipeline.vue style 拆分 */
.graph-root {
  box-sizing: border-box;
  height: 100%;
  position: relative;
  width: 100%;
}

/* 可滚动 */
.graph-cont-scroll {
  //background-color: #f0f2f5;
  background-color: #fff;
  box-sizing: border-box;
  height: 100%;
  overflow: auto;
  transition: all 0.3s;
  width: 100%;

  &::-webkit-scrollbar {
    height: 6px;
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: rgb(239, 239, 239);
    border-radius: 2px;
  }

  &::-webkit-scrollbar-thumb {
    background: #bfbfbf;
    border-radius: 6px;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: #888;
  }

  &::-webkit-scrollbar-button {
    background-color: #f1f1f1;
    height: 6px;
    width: 6px;
  }

  &::-webkit-scrollbar-corner {
    background: transparent;
  }

  /* 画布 */
  .graph {
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    /* transition: all 0.3s; */

    .node.selected {
      border: 2px solid #6570ff;
    }

    /* 框选 */
    .box-to-choose {
      background-color: #888;
      border: 2px dashed #5d637e;
      opacity: 0.3;
      position: absolute;
    }

    /* 框选虚拟节点拖拽 */
    .choose-box-node-dragging {
      background-color: #6973ff;
      position: absolute;

      .choose-dragging-name {
        background-color: #5f6368;
        position: absolute;
      }
    }
  }
}

.clean-node-menu {
  display: flex;
  // height: 40px;
  justify-content: center;
  position: absolute;
  top: -35px;
  // width: 80px;

  /* 更多 菜单 */
  .more-icon-menu {
    background: #fff;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.12);
    display: none;
    min-width: 200px;
    // height: 125px;
    padding: 5px;
    position: absolute;
    z-index: 70;

    .m-span {
      font-size: 12px;
      margin-left: 5px;
    }
  }

  .icon-list {
    align-items: flex-end;
    bottom: 9px;
    display: flex;
    justify-content: center;
    position: absolute;
    width: 100%;
    
    .icon {
      // margin: 0 2px;
      .icon-with-status {
        border: 1px solid #fff;
        display: flex;
        flex-direction: column;
        // font-size: 13px;

        .operate-icon {
          border: 1px solid #fff;
          // padding: 2px;

          &:hover {
            border: 1px solid #d9d9d9;
            border-radius: 3px;
            color: #6973ff;
          }
        }

        // .status-icon {
        //   font-size: 12px;
        //   margin-bottom: 2px;
        // }
      }
    }

    .more-icon {
      bottom: 0;
      padding: 2px;
      position: absolute;
      right: 0;

      &:hover {
        border: 1px solid #d9d9d9;
        border-radius: 3px;
        color: #6973ff;
      }
    }
  }
  
  .bottom-div {
    border: 1px solid #b6bdd2;
    border-top: 0;
    bottom: 5px;
    // height: 4px;
    // margin: 0 10px;
    position: absolute;
    // width: 60px;
  }
}

.clean-node-menu-forbidden {
  cursor: not-allowed;
  opacity: 0.6;
}


/* 节点 胶囊 */
.node-capsule {
  align-items: center;
  background-color: #fff;
  //border: 2px solid #e9e9e9;
  // background: #e9e9e9;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  // flex-direction: row;
  font-size: 0.9rem;
  justify-content: center;
  margin: 0 auto;
  position: absolute;
  text-align: center;
  /*transition-duration: 0.2s, 0.2s;*/
  /*transition-property: top, left;*/
  user-select: none;
  z-index: 60;

  /* 节点多表折叠按钮 取消 */
  .node-hover-toggle-table {
    border-radius: 2px;
    display: none;
    height: 60%;
    width: 20px;

    &:hover {
      background-color: #f1f1f1;
    }
  }

  // TODO 多表折叠按钮
  &:hover {
    //  .node-hover-toggle-table {
    //    align-items: center;
    //    display: flex;
    //    justify-content: center;
    //  }
    border: 2px solid #d9d9d9;
    box-shadow: 0 0 5px rgba(88, 98, 230, 0.2);
  }

  /* 插槽 按钮 */
  .after-add-node {
    background-color: #fff;
    border-radius: 7px;
    display: none;
    font-size: 16px;
    height: 16px;
    line-height: 16px;
    position: absolute;
    right: -10px;
    text-align: center;
    width: 16px;
  }

  &:hover .after-add-node {
    display: inline-block;
  }
}

/* 选择的节点 */
.node-selected {
  //border: 2px solid #c5c9ff;
  border: 2px solid #c5c9ff;
  box-shadow: 0 0 5px rgba(88, 98, 230, 0.2);
  // background: #c5c9ff;
  /*box-shadow: 0 0 1px 2px rgba(65, 109, 220, 0.1);*/
}

.node-box-choose {
  //border: 2px solid #6570ff;
  // background: #c5c9ff;
  border: 2px solid #d9d9d9;
  box-shadow: 0 0 5px rgba(88, 98, 230, 0.2);;
}

.node-located {
  border: 2px solid #d9d9d9;
  box-shadow: 0 0 5px rgba(88, 98, 230, 0.2);;
}

.opacity40 {
  opacity: 0.4;
}


/* 节点执行动画 */
@keyframes node-running {
  0% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}

.node-background-running {
  animation: node-running 1.4s ease infinite;
  background: linear-gradient(90deg, #e9e9e9 25%, #a8adef 37%, #e9e9e9 63%);
  background-size: 400% 100% !important;
}

/* 节点关系编辑 */
.node-relevance {
  position: absolute;
  z-index: 70;

  .relevance-fun {
    background-color: #fff;
    //border: 2px solid #dee0fb;
    border-radius: 4px;
    box-shadow: #5862e6 0 0 4px 0;
    font-size: 12px;
    overflow: hidden;
    position: absolute;
    text-align: center;
    transition: width 0.1s;
    user-select: none;
    z-index: 71;

    &:hover {
      /*background-color: rgba(65, 109, 220, 0.2);*/
      background-color: rgba(88, 98, 230, 0.2);
    }

    .type-icon-color {
      color: #6973ff;
    }
  }
}

/* 拖拽虚拟节点 */
.dragging-node {
  align-items: center;
  background-color: #fff;
  border: 2px solid #c5c9ff;
  box-shadow: 0 0 5px rgba(88, 98, 230, 0.2);
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  // flex-direction: row;
  font-size: 0.9rem;
  justify-content: center;
  margin: 0 auto;
  opacity: 0.8;
  position: absolute;
  text-align: center;
  user-select: none;
  z-index: 61;
}

/* 连接线编辑 */
.menu-container {
  .a-menu-container {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 4px;
    box-shadow: 0 1px 4px 0 rgba(178, 179, 196, 1);
    width: 100px;

    .a-menu-cell {
      border-radius: 4px 4px 0 0;
      height: 32px;
      line-height: 32px;
      margin: 0;
      width: 100%;

      &:hover {
        background: rgba(239, 240, 254, 1);
      }
    }
  }
}
